<template>
  <div class="home">
    <div
      ref="canvas"
      class="div-left div-edit"
      contenteditable="true"
      @keydown="handleKeyDown"
    >
      <canvas id="canvas" :width="width" :height="height" />
    </div>
    <div class="div-left">
      <ul>
        <li>
          <h1 class="h h1">
            点击左侧开始
          </h1>
        </li>
        <li>
          <h1 class="h h1">
            按下esc终止
          </h1>
        </li>
        <li>
          <h1 class="h h1">
            <button @click="show1 = true" class="h btn2">上传谱子</button>
            <span v-show="show1">
              <div>
                <textarea
                  placeholder="请输入谱子名称"
                  v-model="rectInfos.name"
                  class="input1"
                />
              </div>
              <button @click="handlePush" class="h btn2">上传</button>
            </span>
          </h1>
        </li>
      </ul>
      <h2 class="h2"></h2>
    </div>
    <div class="div-left"></div>
    <br />
  </div>
</template>

<script>
import { insertRects } from "./api";
export default {
  name: "Home",
  data() {
    return {
      // 录谱内容
      show1: false,
      interval: {},
      stop: true,
      rectInfos: {},

      // 打谱内容
      ctx: {},
      now: 0,
      over: false,
      width: 800,
      height: 800,
      rectNum: 1,
      roadMax: 4,
      roadWidth: 120,
      maxTest: 100,
      roadHeight: 800,
      maxHeight: 60,
      maxWidth: 10,
      speed: 1,
      rectData: [{ x: 0, y: 0, w: 100, h: 10 }],
      keyData: [],
      keySet: [
        { key: 90, no: 0 },
        { key: 88, no: 1 },
        { key: 67, no: 2 },
        { key: 86, no: 3 }
      ],
      inter: 5,
      maxMinLength: 10000,
      maxAllowHeight: 10
    };
  },
  methods: {
    init() {
      console.log("start getCanvas");
      const canvas = document.getElementById("canvas");
      this.ctx = canvas.getContext("2d");
    },
    randomInt(x) {
      return Math.trunc(Math.random() * x);
    },
    drawBack() {
      for (let z = 0; z < this.keySet.length; z++) {
        const lineG = this.ctx.createLinearGradient(80, 80, 200, 200);
        lineG.addColorStop(0.5, "green");
        lineG.addColorStop(1, "blue");
        this.ctx.strokeStyle = lineG;
        this.ctx.lineWidth = 10;
        this.ctx.strokeRect(
          z * this.roadWidth,
          0,
          this.roadWidth,
          this.roadHeight
        );
      }
    },
    randomColor(x, y, z) {
      return (
        "rgb(" +
        this.randomInt(x) +
        "," +
        "0" +
        this.randomInt(y) +
        "," +
        this.randomInt(z) +
        "," +
        Math.random() +
        ")"
      );
    },
    fillRect(x, y, w, h) {
      this.ctx.fillRect(x, y, w, h);
    },
    strokeRect(x, y, w, h) {
      this.ctx.strokeRect(x, y, w, h);
    },

    drawRect() {
      if (this.keyData.length > 0) {
        for (const m of this.keyData) {
          // console.log(m);
          const lineG = this.ctx.createLinearGradient(80, 80, 200, 200);
          lineG.addColorStop(0.5, "green");
          lineG.addColorStop(1, "blue");
          this.ctx.fillStyle = lineG;

          this.fillRect(this.roadWidth * m.no, m.y, this.roadWidth, 5);
        }
      }
    },
    refreshRect() {
      if (this.keyData.length > 0) {
        for (const ss of this.keyData) {
          ss.y += this.speed;
        }
      }
    },

    setResult(e) {
      this.judgeResult = e;
    },

    getNoByKey(key) {
      console.log("key is ", key);
      const keyInfos = this.keySet.filter(e => {
        return e.key === key;
      });
      console.log(keyInfos);
      if (keyInfos.length > 0) {
        return keyInfos[0].no;
      } else {
        return -1;
      }
    },

    handlePush() {
      const first = this.keyData[0];
      this.rectInfos.rectList = this.keyData.map(e => {
        return {
          no: e.no,
          v: e.v,
          y: e.y - first.y
        };
      });

      console.log(this.rectData);
      insertRects(this.rectInfos).then(re => {
        console.log(re);
        alert("上传成功，字符数字为" + re);
        this.show1 = false;
      });
    },
    handleKeyDown(e) {
      console.log(e);
      const keyCode = e.keyCode;
      console.log(e.keyCode);
      if (keyCode === 27) {
        console.log("按键终止 keyData保存");
        this.stop = true;
      } else {
        const no = this.getNoByKey(e.keyCode);
        console.log(no);
        if (no !== -1) {
          this.keyData.push({
            no: no,
            y: 0
          });
        }

        clearInterval(this.interval);
        this.interval = setInterval(() => {
          this.ctx.clearRect(0, 0, this.width, this.height);
          this.drawBack();
          if (!this.stop) {
            this.refreshRect();
          }
          this.drawRect();
        }, this.inter);
      }
    }
  },
  mounted() {
    this.init();
    this.$refs.canvas.focus();

    this.stop = false;
    this.drawBack();
  }
};
</script>
<style scoped>
.h1 {
}
.h2 {
}
.div-left {
  display: inline-block;
}
</style>
